import ArgTable from '@/components/ArgTable';
import { getMyList } from '@/services/myApi';
import { Button, Popconfirm, Space, Input } from 'antd';
import mCommon from '@/components/mCommon/index';
import { useRef, useState } from 'react';
const getColumn = (updateMethod) => {
  return [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '性别',
      key: 'status',
      dataIndex: 'status',
      render: (status) => <span>{status === 1 ? '男' : '女'}</span>,
    },
    {
      title: '地址',
      dataIndex: 'home',
      key: 'home',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space size="middle">
          <a>编辑</a>
          <Popconfirm
            title="此操作将永久删除该项目, 是否继续?"
            okText="确定"
            cancelText="取消"
            onConfirm={() => {
              updateMethod();
            }}
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
};
const FormConfig = {
  colNum: 4,
  cols: [
    {
      formKey: 'name',
      type: 'input',
      label: '名称',
    },
    {
      formKey: 'home',
      type: 'input',
      label: '地址',
    },
    {
      formKey: 'age',
      type: 'input',
      label: '年龄',
    },
    {
      formKey: 'status',
      type: 'select',
      label: '性别',
      propsConfig: {
        list: [
          { label: '男', value: 1 },
          { label: '女', value: 0 },
        ],
      },
    },
    {
      type: 'btns',
      handleClick: (type) => {
        console.log('1', type);
      },
      propsConfig: {
        groupType: 'search',
      },
    },
  ],
};

const App = () => {
  const inputRef = useRef(null);
  const [show, setShow] = useState(false);
  let [SearchData, setSearchData] = useState({});
  const mFormRef = useRef();
  const getForm = (data) => {
    setSearchData(Object.assign({}, data));
  };
  const resetForm = () => {
    setSearchData(Object.assign({}, {}));
  };
  const Demo = () => {
    const [value, setValue] = useState('');
    const handleChange = (e) => {
      setValue(e.target.value);
    };
    return (
      <>
        <div style={{ display: 'flex', marginBottom: '20px' }}>
          <Button
            onClick={() => {
              setShow(true);
              setTimeout(() => {
                inputRef.current?.focus();
              }, 0);
            }}
          >
            点击聚焦
          </Button>
          <Button
            onClick={() => {
              setTimeout(() => {
                console.log(1);
              }, 0);
              console.log(2);
            }}
          >
            获取input值
          </Button>
          {show ? (
            <Input
              ref={inputRef}
              value={value}
              onChange={handleChange}
              // autoFocus={show}
            ></Input>
          ) : (
            ''
          )}
        </div>
      </>
    );
  };
  return (
    <div style={{ padding: '20px' }}>
      <mCommon.Mform
        cRef={mFormRef}
        FormConfig={FormConfig}
        getForm={getForm}
        resetForm={resetForm}
      ></mCommon.Mform>

      {/* <Demo></Demo> */}
      <ArgTable
        owncolumns={(updatefunc) => getColumn(updatefunc)}
        queryAction={getMyList}
        baseProps={{ rowKey: (record) => record.project_id }}
        params={SearchData}
      />
    </div>
  );
};

export default App;
